<%@ page import="com.situ.web.pojo.Province" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2023/3/24
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <%
        List<Province> list = (List<Province>) request.getAttribute("list");
    %>
    省份：<select id="provinceId" >
        <option>---请选择省份---</option>
        <%
            for (Province province : list) {
        %>
                 <option value="<%=province.getId()%>"><%=province.getProvince()%></option>
        <%
            }
        %>
    </select>
    城市：<select id="cityId">
        <option>---请选择城市---</option>
    </select>
    区县：<select id="areaId">
        <option>---请选择区县---</option>
    </select>

    <script>
        $(function() {
            //给省份绑定change事件
            $('#provinceId').change(function() {
                $('#cityId option:gt(0)').remove();

                var provinceId = $('#provinceId').val();
                $.post(
                    '<%=request.getContextPath()%>/ajax3?method=selectCity',
                    {'provinceId': provinceId},
                    function(jsonObj) {
                        console.log(jsonObj);
                        $(jsonObj).each(function() {
                            //<option value="001">山东省</option>
                            $('#cityId').append('<option value="'+this.id+'">'+this.city+'</option>')
                        });
                    },
                    'json'
                );
            });

        });
    </script>
</body>
</html>
